/**
 * @Title: sub-classes.js
 * @Description: classes-list
 * @author: LoveCrossZhu
 * @date: 2020/6/29 8:12 AM
 * @version V1.0
 */

import React, {useEffect, useState} from 'react';
import {View, Text, Image, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import {scaleSizeW, scaleSizeH, setSpText} from '@/util/screen';
import {req_courseCategory} from "@/util/apis";
import LoadingUtil from "@/util/loading";

const SubItem = ({item, onClick}) => {
    return (
        <TouchableOpacity onPress={onClick}>
            <View key={item.id} style={styles.dailyItem}>
                <Image style={styles.imgSize} resizeMode="cover" source={{uri: item.courseImage}}></Image>
                <View style={styles.desc}>
                    <View style={styles.monthContent}>
                        <View style={styles.triangleLeft}></View>
                        <Text style={styles.month}>{item.instructorTitle}</Text>
                    </View>
                    <Text style={styles.level}>{item.level}</Text>
                    <Text style={styles.name}>{item.courseCategoryName}</Text>
                    <Text style={styles.time}>{`${item.duration}in`}</Text>
                </View>
            </View>
        </TouchableOpacity>
    );
}

const SubClasses = props => {
    const {navigation, route} = props;
    const [list, setData] = useState([]);
    const id = route.params.item.id;
    const req_class = async () => {
        LoadingUtil.startShowLoading();
        const res = await req_courseCategory(id);
        LoadingUtil.dismissLoading();
        setData(res);
    }

    const goDetail = (item) => {
        navigation.navigate('ClassDetail', {item});
    }

    useEffect(() => {
        navigation.setOptions({
            title:'COURSE CATEGORY'
        });
        req_class();
    }, []);

    return (
        <View style={styles.container}>
            <FlatList
                ItemSeparatorComponent={() => <View style={styles.separator}/>}
                data={list}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item, index}) => (
                    <SubItem onClick={() => goDetail(item)} index={0} key={`#${index}`} item={item}/>
                )}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f5f5f5'
    },
    dailyItem: {
        width: '100%',
        height: scaleSizeH(320),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        // paddingHorizontal: scaleSizeH(54),
        // paddingVertical: scaleSizeW(60),
        paddingLeft: scaleSizeW(54),
        paddingRight: scaleSizeW(54),
        paddingTop: scaleSizeH(60),
        paddingBottom: scaleSizeH(60),
        marginBottom: scaleSizeH(33),
        backgroundColor: '#ffffff'
    },
    imgSize: {
        width: scaleSizeW(200),
        height: scaleSizeH(280),
        marginRight: scaleSizeW(110),
        backgroundColor: '#f9f9f9',
    },
    desc: {
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
    },
    monthContent: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderTopRightRadius: 2,
        borderTopLeftRadius: 2,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        overflow: 'hidden'
    },
    triangleLeft: {
        width: 0,
        height: 0,
        borderColor: 'transparent',
        borderTopWidth: scaleSizeW(19),
        borderBottomWidth: scaleSizeW(19),
        borderRightWidth: scaleSizeW(19),
        borderRightColor: '#2B2B2B',
    },
    month: {
        width: scaleSizeW(120),
        height: scaleSizeH(40),
        lineHeight: scaleSizeH(40),
        textAlign: 'center',
        backgroundColor: '#2B2B2B',
        color: '#FFFFFF',
        fontSize: setSpText(24),
        fontWeight: '500',
    },
    level: {
        color: '#000000',
        fontSize: setSpText(32),
        // marginTop: scaleSizeH(22),
        marginTop: scaleSizeH(12),
        marginBottom: scaleSizeH(35),
        // marginBottom: scaleSizeH(25),
        fontWeight: '600'
    },
    name: {
        fontSize: setSpText(24),
        color: '#777777',
        marginBottom: scaleSizeH(18),
        // marginBottom: scaleSizeH(28)
        fontWeight: '600',

    },
    time: {
        color: '#777777',
        fontSize: setSpText(32),
        fontWeight: '600',
    }
});


export default SubClasses;
